<template>
  <div class="my-container">
    <div class="info-wrapper flexbox align-center justify-center">
      <div class="head">
        <img :src="info.headUrl" alt="">
      </div>
      <div class="content flexbox column">
        <div class="username ellipsis">{{ info.nickname }}</div>
        <div class="userid">个人ID: {{ userId }}</div>
      </div>
      <div class="action"></div>
    </div>

    <div class="section-wrapper">

      <!-- <router-link tag="div" class="list-item" to="/Sub/My">
        <div class="icon">
          <img src="@/assets/icons/bonus.svg" alt="">
        </div>
        <div class="title">积分</div>
        <div>
          <span class="user-score">{{ info.score }}</span>
        </div>
      </router-link> -->
      <router-link tag="div" class="list-item" to="/Sub/Album">
        <div class="icon">
          <img src="@/assets/icons/qrcode.svg" alt="">
        </div>
        <div class="title">相册</div>
        <div>
          <i class="fa fa-angle-right"></i>
        </div>
      </router-link>
      <!-- <router-link tag="div" class="list-item" to="/Sub/MyQrcode">
        <div class="icon">
          <img src="@/assets/icons/qrcode.svg" alt="">
        </div>
        <div class="title">二维码</div>
        <div>
          <i class="fa fa-angle-right"></i>
        </div>
      </router-link> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Mutation, Getter, namespace } from 'vuex-class';
import { RawLocation } from "vue-router";
import { MsgTypeKV } from '@/api/socket/imClient';
import MessageMixin from '@/mixins';
import { Webim } from '@/utils/types';
import { Api } from '@/api/http';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');

@Component<My>({
  mixins: [MessageMixin],
})
export default class My extends Vue {
  @chatModule.State("groupSetting") groupSetting: any;
  // @chatModule.State("storeGroupList") storeGroupList: any;
  @userModule.State("loginInfo") loginInfo: any;

  private info: any = {};

  private userId: string = '';

  private eventList: Array<string> = [
    "$getGroupQrcode",
    "$getUserQrcode",
  ];

  /**
   * 生命周期函数
   */
  protected mounted() {
    this.initEvents(this.eventList);

    // this.info.headUrl = this.loginInfo.headurl;
    // this.info.userNick = this.loginInfo.identifierNick;
    let userId: any = localStorage.getItem('userId');
    this.userId = userId;

    if (!this.loginInfo.identifier) {
      return this.$router.push({
        name: 'Chat'
      })
    }

    this.sendMessage(MsgTypeKV.getUserQrcode, {
      imAccount: this.loginInfo.identifier,
    });


  }

  /**
   * 获取到用户qrcode
   */
  private $getUserQrcode(data: any) {

    this.info = data.info;
  }


}
</script>

<style lang="stylus" scoped>
.my-container
  background #efefef

.info-wrapper 
  width 100% 
  height 140px
  background white 
  margin-bottom 20px
  .head 
    flex-basis 25%
    width 25%
    img 
      width 60px 
      height 60px 
      border-radius 3px
  .content 
    flex-basis 60%
    width 60%
    text-align left
    .username 
      font-size 25px 
      font-weight 500 
      margin-bottom 14px
    .userid 
      color #909090
      font-size 15px
  .action 
    flex-basis 10%
    width 10%

.section-wrapper
  margin-top 6px
  .list-item 
    width 100% 
    height 48px 
    display flex
    justify-content space-between
    align-items center
    background white
    padding 2px 12px
    box-sizing border-box
    border-bottom 1px solid #f5f5f5
    .icon 
      flex-basis 10% 
      width 10% 
      img 
        width 24px 
        height 24px 
    .title 
      flex-basis 80% 
      width 80% 
      text-align left

.user-score
  display inline-block 
  margin-right 20px
</style>

